<template>
	<div class="music">
		<button @click="addMusic">添加</button>
		<ul>
			<li v-for="item in arr">{{item}}</li>
		</ul>
		<div id="aplayer"></div>
	</div>
</template>
<script>
	import 'aplayer/dist/APlayer.min.css';
	import APlayer from 'aplayer';
	import { mapState } from 'vuex';
	export default {
		name: "music",
		data() {
			return {
				ap: null,
				arr: [],
				musicNum: 0
			}
		},
		computed: {
			...mapState(["musicList"])
		},
		created() {
			this.loadAPlayer(this);
		},
		methods: {
			loadAPlayer(that) {
				that.$ajax({
					type: "post",
					dataType: "text",
					url: that.musicList[that.musicNum].lrc
				}).then((res) => {
					that.ap = new APlayer({
						container: document.getElementById('aplayer'),
						fixed: true,
						loop: 'all',
						listFolded: true,
						lrcType: 2,
						audio: [{
							name: that.musicList[that.musicNum].title,
							artist: that.musicList[that.musicNum].author,
							url: that.musicList[that.musicNum].url,
							cover: that.musicList[that.musicNum].pic,
							theme: 'red',
							lrc: res.data
						}]
					});
					that.ajaxMusicLrc(that);
					that.showPlay(that);
				});
			},
			addMusic() {
				this.ajaxMusicLrc(this, 6);
			},
			showPlay(that) {
				that.ap.on('play', function() {
					that.$store.state.music = true;
				});
				that.ap.on('pause', function() {
					that.$store.state.music = false;
				});
			},
			ajaxMusicLrc(that, num = 10) {
				for(let i = 1; i <= num; i++) {
					that.$ajax({
						type: "post",
						async: true,
						dataType: "text",
						url: that.musicList[that.musicNum + i].lrc
					}).then((res) => {
						if(i == num) {
							that.musicNum += num - 1;
							that.arr.push("当前共加载了----" + (this.musicNum + 1) + "----首歌曲！！！");
						} else {
							that.ap.list.add([{
								name: that.musicList[that.musicNum + i].title,
								artist: that.musicList[that.musicNum + i].author,
								url: that.musicList[that.musicNum + i].url,
								cover: that.musicList[that.musicNum + i].pic,
								theme: 'red',
								lrc: res.data
							}]);
						};
					})
				};
			}
		}
	}
</script>
<style scoped lang="scss">
	.music {
		width: 100%;
		height: 100%;
		font-size: 16px;
		ul {
			margin-top: 10px;
			li {
				margin: 10px 0;
				font-size: 18px;
				color: #000
			}
		}
	}
</style>